<template>
  <h3>{{ person }}</h3>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>职业：{{ job.j1.type }}</h2>
  <h2>薪资：{{ job.j1.salary }}K</h2>
  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">修改年龄</button>
  <button @click="job.j1.salary++">加薪</button>
</template>
<script>
import { reactive, toRef,toRefs } from "vue";
export default {
  name: "Demo",
  setup(props, context) {
    // 数据
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          type: "前端",
          salary: 10,
        },
      },
    });
 

    /* 
    toRefs()方法会将响应式对象转为一个普通对象，
    对象中的每一项都是ref对象，
    当任意一项ref对象发生变化时，都是映射到源对象
     */
    const p = toRefs(person)
    console.log(p); 

    // 返回一个对象供模版使用
    return {
      person,
      ...toRefs(person)
    };
  },
};
</script>

